<template>
    <div>
        <h2>G6 交互操作</h2>
        <div ref="container" style="width:100%;height:400px;background:#f5f5f5;"></div>
    </div>
</template>
<script lang="ts">
export default { name: 'AntvG6Demo3' };
</script>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Graph } from '@antv/g6';
const container = ref();

onMounted(() => {
    const graph = new Graph({
        container: container.value,
        width: 600,
        height: 400,
        behaviors: [
            { // 点击配置
                type: 'click-select',
                key: 'click-select-1',
                degree: 800, // 选中扩散范围
                state: 'active', // 选中的状态
                neighborState: 'neighborActive', // 相邻节点附着状态
                unselectedState: 'inactive', // 未选中节点状态
            },
            { // 拖拽配置
                type: 'drag-element',
                key: 'drag-element-1',
                enableAnimation: true,
                dropEffect: 'move',
                shadow: false, // 启用拖拽幽灵节点
            },
            // {
            //     type: 'wheel-zoom',
            //     enableOptimize: true,
            //     trigger: 'wheel',
            // },
            // 缩放配置
            'zoom-canvas',
            // { // 固定缩放的大小配置
            //     type: 'fix-element-size',
            //     enable: true, // 开启该交互
            //     state: 'active', // 要固定大小的元素状态
            //     reset: true, // 元素重绘时还原样式
            // },
            { // 拖拽画布配置
                type: 'drag-canvas',
                key: 'drag-canvas-1',
                direction: 'both',
                enable: (e) => { // 设置按住shift的时候不生效
                    console.log('e.originalEvent', e.originalEvent);
                    return !e.originalEvent.shiftKey && !e.originalEvent.ctrlKey;
                }
            },
            { // 框选配置
                type: 'brush-select',
                key: 'brush-select-1',
                immediately: true, // 可以看到框框笼罩过去时，元素立即被框选了
                trigger: ['shift'], // 配合多种按键进行框选
            },
            { // 聚焦节点配置
                type: 'focus-element',
                animation: {
                    duration: 500,
                    easing: 'ease-in',
                },
            },
            { // 套索选择配置
                type: 'lasso-select',
                key: 'lasso-select',
                immediately: true, // 可以看到框框笼罩过去时，元素立即被框选了
                trigger: ['control'], // 配合多种按键进行框选
            },
        ],
        layout: { type: 'random' },
        data: {
            nodes: [
                { id: 'node1', label: 'A', x: 100, y: 100 },
                { id: 'node2', label: 'B', x: 300, y: 100 },
                { id: 'node3', label: 'C', x: 200, y: 300 }
            ],
            edges: [
                { source: 'node1', target: 'node2' },
                { source: 'node2', target: 'node3' },
                { source: 'node3', target: 'node1' }
            ]
        }
    });
    graph.render();

    // 监听节点点击
    graph.on('node:click', (evt: any) => {
        console.log('e', evt);
        const model = evt.target;
        if (model) {
            alert('节点: ' + model.id + ', ' + model.label);
        }
    });
    // 监听边点击
    graph.on('edge:click', (evt: any) => {
        console.log('e', evt);
        const model = evt.target;
        if (model) {
            alert('边: ' + model.id + '->' + model.target);
        }
    });

    // 监听afteritemselected事件，点击节点弹窗显示label
    graph.on('afteritemselected', (evt: any) => {
        console.log('afteritemselected evt', evt);
        if (evt.item && evt.item.getModel) {
            const model = evt.item.getModel();
            alert('选中节点: ' + model.label);
        }
    });
});
</script> 